<html>

<head>
<meta charset="utf8">
<title>litejs demonstrate</title>
<script src="Lite.js" type="text/javascript"></script>
</head>

<body>
	<nav>
		<h1>litejs demonstrate</h1>
	</nav>
	<div id="div01" class="box">
		<h6>user infomation</h6>
		<p>id:<%id%></p>
		<form id="frm01">
			<p>
				age: <input type="text" e-model="age" />
			</p>
			<p>
				name: <input type="text" e-model="name" />
			</p>
			<input type="button" value="edit" onclick="edit(this)" />
			<!-- <button onclick="edit(this)">edit</button> -->
		</form>
		<button class="white" e-click="chngClz">rotate</button>
	</div>
	<br>
	<div id="div02" class="box">
		<p><%age%></p>
		<p><%name%></p>
	</div>
	<br>
	<footer>
		<br> <br>
		<p>生成第一个导航:</p>
		<div id='page'></div>
		<br> <br>
		<p>生成第二个导航:</p>
		<div id='page2'></div>
	</footer>

	<script>
		elite.use([ "http", "core", "spagination", "move", "UI" ], callback);

		var user1, user2, edao, em1, em2;
		function callback() {
			edao = new EDAO("user");
			user1 = JSON.parse(edao.read(1));
			user2 = {
				"id" : 3,
				"name" : "carter",
				"age" : 25
			};
			edao.create(user2);

			em1 = new ECtrl({
				view : "#div01",
				data : {
					"age" : user1.age,
					"name" : user1["name"],
					"id" : user1["id"]
				},
				methods : {
					"chngClz" : function(ele, event) {
						ele.className = "black" || "white";
					}
				}
			});
			em2 = em1.extend({
				view : "#div02",
				data : {
					"age" : "new age"
				},
			});
			//console.info(em2["name"]);

			setTimeout(function() {
				em1["age"] = 33;
				em2["age"] = 35;
				//alert(em2["age"]);
			}, 5000);
		}

		function edit(ele) {
			//console.info(em1.age);
			if (ele.parentNode.getElementsByTagName("input")[0].value == em1.age
					&& ele.parentNode.getElementsByTagName("input")[1].value == em1["name"]) {
				user2.age = em1.age;
				user2.name = em1["name"];
				edao.update(user2);
			} else {
				console.error("data unbind");
			}
		}
	</script>
</body>

</html>